<template>
	<el-dialog
		:visible="true"
		width="40%"
		:destroy-on-close="true"
		class="rempadding"
		:before-close="handleClose"
	>
		<div slot="title" class="dialog-title">
			<el-form :inline="true" label-width="auto">
				<el-row>
					<el-col :span="24">
						<el-form-item
							:label="$t('common.member_number') + ' : '"
						>
							{{ rowVal.playerName }}
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<el-table
			v-loading="loading"
			element-loading-spinner="el-icon-loading"
			size="mini"
			border
			class="small-size-table"
			:data="tableData"
			style="margin-bottom: 15px"
			highlight-current-row
			:header-cell-style="getRowClass"
		>
			<el-table-column
				prop="cash"
				align="center"
				:label="$t('report.center_wallet_balance')"
				min-width="180px"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span :style="handleNumberColor(scope.row.cash)">
						{{ handleCurrency(rowVal.currency) }}
						{{ handleNumber(rowVal.currency, scope.row.cash) }}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="creditAvailable"
				align="center"
				:label="
					$t('funds.settlement_bill_management.credit_wallet_balance')
				"
				min-width="160px"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span :style="handleNumberColor(scope.row.creditAvailable)">
						{{ handleCurrency(rowVal.currency) }}
						{{
							handleNumber(
								rowVal.currency,
								scope.row.creditAvailable
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="creditTotal"
				align="center"
				:label="$t('report.credit_limit')"
				min-width="160px"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span :style="handleNumberColor(scope.row.creditTotal)">
						{{ handleCurrency(rowVal.currency) }}
						{{
							handleNumber(rowVal.currency, scope.row.creditTotal)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="returnLoan"
				align="center"
				:label="$t('report.payable_accounts')"
				min-width="160px"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span :style="handleNumberColor(scope.row.returnLoan)">
						{{ handleCurrency(rowVal.currency) }}
						{{
							handleNumber(rowVal.currency, scope.row.returnLoan)
						}}
					</span>
				</template>
			</el-table-column>
		</el-table>
		<div slot="footer" class="dialog-footer" style="text-align: center">
			<el-button type="primary" @click="handleClose">关闭</el-button>
		</div>
	</el-dialog>
</template>
<script>
import list from '@/mixins/list'
export default {
	mixins: [list],
	props: {
		rowVal: {
			type: Object,
			default: () => {}
		},
		closeDialog: {
			type: Function,
			default: () => {}
		}
	},
	data() {
		return {
			loading: false,
			tableData: []
		}
	},
	methods: {
		loadData() {
			this.loading = true
			this.$api
				.getReportPlayerBalance({
					merchantId: this.rowVal.merchantId,
					userId: this.rowVal.userId
				})
				.then((res) => {
					this.loading = false
					this.tableData.push(res?.data)
				})
				.catch(() => {
					this.loading = false
				})
		},
		handleClose() {
			this.closeDialog(false)
		}
	}
}
</script>
<style lang="scss" scoped>
.fenye {
	text-align: center;
}
::v-deep .el-table__body-wrapper {
	overflow-y: auto;
	max-height: 45vh;
}
</style>
